import {PlColorPicker, PlForm, PlFormItem, PlInput, PlNumber, PlSelect, PlSelectOption, PlToggle} from "plain-design";
import {iVisualComponentConfig} from "../../packages/utils/types.base";
import {tComponentConfig} from "../../packages/createVisualEditorUser/createVisualEditorComponent/createVisualEditorComponentConfig";

/**
 * 定义组件配置，只在编辑内容的时候用到，预渲染或者说预览的时候不需要
 * @author  韦胜健
 * @date    2022/2/6 11:50
 */
export function predefineComponentConfig({registryComponentConfig}: tComponentConfig) {
    /*---------------------------------------可用组件-------------------------------------------*/
    registryComponentConfig({group: '可用组件', name: '图片_1', component: createImageComponent('http://1.116.13.72/web/upload_file/20211223150351_7bd7769e-63be-11ec-8add-525400138871/adidas-shoes2.png')})
    registryComponentConfig({group: '可用组件', name: '图片_2', component: createImageComponent('http://1.116.13.72/web/upload_file/20211223150111_1cc8fb12-63be-11ec-8add-525400138871/adidas-shoes.png')})
    registryComponentConfig({group: '可用组件', name: '图片_3', component: createImageComponent('http://1.116.13.72/web/upload_file/20211221015637_2d8c4598-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%8D%A1%E7%89%87.png')})
    registryComponentConfig({group: '可用组件', name: '图片_4', component: createImageComponent('http://1.116.13.72/web/upload_file/20211227222453_c25c4db7-6720-11ec-8add-525400138871/111.png')})
    registryComponentConfig({group: '可用组件', name: '图片_5', component: createImageComponent('http://1.116.13.72/web/upload_file/20211227222454_c26ec888-6720-11ec-8add-525400138871/222.png')})

    registryComponentConfig({
        group: '可用组件', name: '按钮', component: {
            code: 'button',
            preview: () => (
                <img
                    src="http://1.116.13.72/web/upload_file/20211223144240_86081321-63bb-11ec-8add-525400138871/filter_button.png"
                    style={{
                        width: "100%",
                        objectFit: 'contain',
                    }}
                />
            ),
            defaultData: {
                style: {
                    display: 'inline-block',
                },
                data: {
                    text: '按钮文案',
                    mode: 'dark',
                    size: 'large',
                    width: '200px',
                    arrow: true,
                }
            },
            config: ({base, data}) => {

                const buttonModeOptions = [
                    {label: '亮色按钮', val: 'light'},
                    {label: '深色按钮', val: 'dark'},
                ]
                const buttonSizeOptions = [
                    {label: '大', val: 'large'},
                    {label: '中', val: 'normal'},
                    {label: '小', val: 'small'},
                ]

                base.registry({
                    name: '按钮设置',
                    render: () => (
                        <>
                            <PlFormItem label="按钮文本"><PlInput v-model={data.data.text}/></PlFormItem>
                            <PlFormItem label="按钮类型">
                                <PlSelect v-model={data.data.mode}>
                                    {buttonModeOptions.map(item => (
                                        <PlSelectOption key={item.val} label={item.label} val={item.val}/>
                                    ))}
                                </PlSelect>
                            </PlFormItem>
                            <PlFormItem label="按钮大小">
                                <PlSelect v-model={data.data.size}>
                                    {buttonSizeOptions.map(item => (
                                        <PlSelectOption key={item.val} label={item.label} val={item.val}/>
                                    ))}
                                </PlSelect>
                            </PlFormItem>
                            <PlFormItem label="按钮宽度">
                                <PlInput v-model={data.data.width}/>
                            </PlFormItem>
                            <PlFormItem label="显示箭头">
                                <PlToggle v-model={data.data.arrow}/>
                            </PlFormItem>
                        </>
                    )
                })
            },
        }
    })
    registryComponentConfig({
        group: '可用组件', name: '多列容器', component: {
            code: 'column-container',
            previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png',
            defaultData: {
                style: {
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'stretch',
                    justifyContent: 'flex-start',
                },
                data: {
                    columnNum: 3,
                },
                childrenData: [],
            },
            config: ({base, data}) => {
                base.registry({
                    name: '容器设置',
                    render: () => (
                        <>
                            <PlFormItem label="列数">
                                <PlNumber v-model={data.data.columnNum}/>
                            </PlFormItem>
                            <PlFormItem label="列间距">
                                <PlNumber v-model={data.data.gutter}/>
                            </PlFormItem>
                        </>
                    )
                })
            },
        }
    })
    registryComponentConfig({
        group: '可用组件', name: '多行容器', component: {
            code: 'rows-container',
            previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
            defaultData: {
                style: {
                    display: 'block',
                },
                data: {
                    rowsNum: 3,
                },
                childrenData: [],
            },
            config: ({base, data}) => {
                base.registry({
                    name: '容器设置',
                    render: () => (
                        <>
                            <PlFormItem label="行数">
                                <PlNumber v-model={data.data.rowsNum}/>
                            </PlFormItem>
                            <PlFormItem label="列间距">
                                <PlNumber v-model={data.data.gutter}/>
                            </PlFormItem>
                        </>
                    )
                })
            },
        }
    })
    registryComponentConfig({
        group: '可用组件', name: '轮播容器', component: {
            code: 'carousel-container',
            previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png',
            defaultData: {
                data: {
                    carouselNum: 3,
                    height: 500,
                    autoplay: true,
                    hideButton: false,
                    loop: true,
                },
                childrenData: [],
            },
            config: ({base, data}) => {
                base.registry({
                    name: '容器设置',
                    render: () => (
                        <>
                            <PlFormItem label="轮播页数"><PlNumber v-model={data.data.carouselNum}/></PlFormItem>
                            <PlFormItem label="轮播高度"><PlNumber v-model={data.data.height}/></PlFormItem>
                            <PlFormItem label="自动播放"><PlToggle v-model={data.data.autoplay}/></PlFormItem>
                            <PlFormItem label="隐藏按钮"><PlToggle v-model={data.data.hideButton}/></PlFormItem>
                            <PlFormItem label="无限滚动"><PlToggle v-model={data.data.loop}/></PlFormItem>
                        </>
                    )
                })
            },
        }
    })
    registryComponentConfig({
        group: '可用组件', name: '固定容器', component: {
            code: 'fixed-size-container',
            previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png',
            config: ({base, data}) => {},
        }
    })
    registryComponentConfig({
        group: '可用组件', name: '正方形容器', component: {
            code: 'square-container',
            previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png',
            config: ({base, data}) => {},
        }
    })
    registryComponentConfig({
        group: '可用组件', name: '文字', component: {
            code: 'text',
            previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_329319b9-61c1-11ec-8add-525400138871/text.png',
            defaultData: {
                data: {
                    text: '默认文本',
                },
                style: {
                    display: 'inline-block',
                    fontSize: '16px',
                    fontWeight: '500',
                    padding: '10px 20px',
                    color: 'black',
                },
            },
            config: ({base, data}) => {
                base.registry({
                    name: '文字设置',
                    render: () => (
                        <>
                            <PlFormItem label="文字内容"><PlInput v-model={data.data.text}/></PlFormItem>
                            <PlFormItem label="文字大小"><PlInput v-model={data.style.fontSize}/></PlFormItem>
                            <PlFormItem label="文字粗细"><PlNumber v-model={data.style.fontWeight} step={100}/></PlFormItem>
                            <PlFormItem label="文字颜色"><PlColorPicker v-model={data.style.color}/></PlFormItem>
                        </>
                    )
                })
            },
        }
    })
    registryComponentConfig({
        group: '可用组件', name: '视频', component: {
            code: 'video',
            previewImage: 'http://1.116.13.72/web/upload_file/20211221020103_cbfa0019-61be-11ec-8add-525400138871/videotape_one.svg',
            defaultData: {
                data: {
                    url: 'https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/bg2.mp4',
                    height: '',
                    width: '100%',
                    autoplay: true,
                },
                style: {
                    width: '100%'
                },
            },
            config: ({base, data}) => {
                base.registry({
                    name: '视频设置',
                    render: () => (
                        <>
                            <PlFormItem label="视频地址"><PlInput v-model={data.data.url}/></PlFormItem>
                            <PlFormItem label="视频宽度"><PlInput v-model={data.data.width}/></PlFormItem>
                            <PlFormItem label="视频高度"><PlInput v-model={data.data.height}/></PlFormItem>
                            <PlFormItem label="自动播放"><PlToggle v-model={data.data.autoplay}/></PlFormItem>
                        </>
                    )
                })
            },
        }
    })

    // /*组合组件的位置*/
    // registryComponentConfig('组合组件')

    /*---------------------------------------容器组件-------------------------------------------*/
    registryComponentConfig({group: '容器组件', name: '普通容器', component: {code: '普通容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221012528_d382778c-61b9-11ec-8add-525400138871/%E6%99%AE%E9%80%9A%E5%AE%B9%E5%99%A8.svg'}})
    registryComponentConfig({group: '容器组件', name: '宫格容器', component: {code: '宫格容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221015748_5780e5d8-61be-11ec-8add-525400138871/browser-grid.svg'}})
    registryComponentConfig({group: '容器组件', name: '正方形容器', component: {code: '正方形容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221023400_66115a5a-61c3-11ec-8add-525400138871/square.png'}})
    registryComponentConfig({group: '容器组件', name: '多列容器', component: {code: '多列容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_acff3875-61c1-11ec-8add-525400138871/column.png'}})
    registryComponentConfig({group: '容器组件', name: '卡片容器', component: {code: '卡片容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221020019_b1f016e6-61be-11ec-8add-525400138871/Pay_with_card.svg'}})
    registryComponentConfig({group: '容器组件', name: '选项卡容器', component: {code: '选项卡容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221020014_aea8ef7e-61be-11ec-8add-525400138871/operate.svg'}})
    registryComponentConfig({group: '容器组件', name: '折叠容器', component: {code: '折叠容器', previewImage: 'http://1.116.13.72/web/upload_file/20211221022823_9daafc67-61c2-11ec-8add-525400138871/collapse.png'}})

    /*---------------------------------------媒体组件-------------------------------------------*/
    registryComponentConfig({group: '媒体组件', name: '音频', component: {code: '音频', previewImage: 'http://1.116.13.72/web/upload_file/20211221020003_a8084131-61be-11ec-8add-525400138871/music.svg'}})
    registryComponentConfig({group: '媒体组件', name: '视频', component: {code: '视频', previewImage: 'http://1.116.13.72/web/upload_file/20211221020103_cbfa0019-61be-11ec-8add-525400138871/videotape_one.svg'}})
    registryComponentConfig({group: '媒体组件', name: '地图', component: {code: '地图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015958_a55d8b8a-61be-11ec-8add-525400138871/-map.svg'}})
    registryComponentConfig({group: '媒体组件', name: '图片', component: {code: '图片', previewImage: 'http://1.116.13.72/web/upload_file/20211221021804_2c676e7a-61c1-11ec-8add-525400138871/New_img.png',}})
    registryComponentConfig({group: '媒体组件', name: '文件', component: {code: '文件', previewImage: 'http://1.116.13.72/web/upload_file/20211221021759_29a1aa15-61c1-11ec-8add-525400138871/filesimg.png'}})
    /*---------------------------------------图表组件-------------------------------------------*/
    registryComponentConfig({group: '图表组件', name: '面积图', component: {code: '面积图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015618_2217cabf-61be-11ec-8add-525400138871/%E9%9D%A2%E7%A7%AF%E5%9B%BE.png'}})
    registryComponentConfig({group: '图表组件', name: '柱状图', component: {code: '柱状图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015711_41a4c5b4-61be-11ec-8add-525400138871/%E6%9F%B1%E7%8A%B6%E5%9B%BE.png'}})
    registryComponentConfig({group: '图表组件', name: '漏斗图', component: {code: '漏斗图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015615_207d80a2-61be-11ec-8add-525400138871/%E6%BC%8F%E6%96%97%E5%9B%BE.png'}})
    registryComponentConfig({group: '图表组件', name: '折线图', component: {code: '折线图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015704_3d9f0cea-61be-11ec-8add-525400138871/%E6%8A%98%E7%BA%BF%E5%9B%BE.png'}})
    registryComponentConfig({group: '图表组件', name: '饼图', component: {code: '饼图', previewImage: 'http://1.116.13.72/web/upload_file/20211221015510_f9c5a439-61bd-11ec-8add-525400138871/%E9%A5%BC%E5%9B%BE.png'}})
    /*---------------------------------------其他组件-------------------------------------------*/
    registryComponentConfig({group: '其他组件', name: '商品卡片', component: {code: '商品卡片', previewImage: 'http://1.116.13.72/web/upload_file/20211221015637_2d8c4598-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%8D%A1%E7%89%87.png'}})
    registryComponentConfig({group: '其他组件', name: '横幅', component: {code: '横幅', previewImage: 'http://1.116.13.72/web/upload_file/20211227222453_c25c4db7-6720-11ec-8add-525400138871/111.png'}})
    registryComponentConfig({group: '其他组件', name: '推荐列表', component: {code: '推荐列表', previewImage: 'http://1.116.13.72/web/upload_file/20211221015641_2f8ab077-61be-11ec-8add-525400138871/%E6%8E%A8%E8%8D%90%E5%88%97%E8%A1%A8.png'}})
    registryComponentConfig({group: '其他组件', name: '活动', component: {code: '活动', previewImage: 'http://1.116.13.72/web/upload_file/20211221015516_fd0d8966-61bd-11ec-8add-525400138871/%E6%B4%BB%E5%8A%A8.png'}})
    registryComponentConfig({group: '其他组件', name: '商品大类', component: {code: '商品大类', previewImage: 'http://1.116.13.72/web/upload_file/20211221015634_2ba80879-61be-11ec-8add-525400138871/%E5%95%86%E5%93%81%E5%A4%A7%E7%B1%BB.png'}})

    registryComponentConfig({group: '其他组件', name: '登陆表单', component: {code: '登陆表单', previewImage: 'http://1.116.13.72/web/upload_file/20211221015507_f7ddac5f-61bd-11ec-8add-525400138871/%E8%A1%A8%E5%8D%95.png'}})
    registryComponentConfig({group: '其他组件', name: '注册表单', component: {code: '注册表单', previewImage: 'http://1.116.13.72/web/upload_file/20211221015707_3f91b4ca-61be-11ec-8add-525400138871/%E6%B3%A8%E5%86%8C.png'}})
    registryComponentConfig({group: '其他组件', name: '商城模板', component: {code: '商城模板', previewImage: 'http://1.116.13.72/web/upload_file/20211221015626_26983540-61be-11ec-8add-525400138871/%E5%95%86%E5%9F%8E%E6%A8%A1%E6%9D%BF.png'}})
    registryComponentConfig({group: '其他组件', name: '未命名_1', component: {code: '未命名_1', previewImage: 'http://1.116.13.72/web/upload_file/20211221015657_38a88e52-61be-11ec-8add-525400138871/%E6%9C%AA%E5%91%BD%E5%90%8D_1.png'}})
    registryComponentConfig({group: '其他组件', name: '未命名_2', component: {code: '未命名_2', previewImage: 'http://1.116.13.72/web/upload_file/20211221015700_3b55d3ea-61be-11ec-8add-525400138871/%E6%9C%AA%E5%91%BD%E5%90%8D_2.png'}})
    /*---------------------------------------基础组件-------------------------------------------*/
    registryComponentConfig({group: '基础组件', name: '输入框', component: {code: '输入框', previewImage: 'http://1.116.13.72/web/upload_file/20211221022140_ad00d1f9-61c1-11ec-8add-525400138871/text.png'}})
    registryComponentConfig({group: '基础组件', name: '多行输入', component: {code: '多行输入', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_329319b9-61c1-11ec-8add-525400138871/text.png'}})
    registryComponentConfig({group: '基础组件', name: '密码输入', component: {code: '密码输入', previewImage: 'http://1.116.13.72/web/upload_file/20211221021806_2dc563af-61c1-11ec-8add-525400138871/password.png'}})
    registryComponentConfig({group: '基础组件', name: '数字输入', component: {code: '数字输入', previewImage: 'http://1.116.13.72/web/upload_file/20211221020009_abdc8e74-61be-11ec-8add-525400138871/number.svg'}})
    registryComponentConfig({group: '基础组件', name: '评分输入', component: {code: '评分输入', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_328efad2-61c1-11ec-8add-525400138871/star.png'}})
    registryComponentConfig({group: '基础组件', name: '滑动条', component: {code: '滑动条', previewImage: 'http://1.116.13.72/web/upload_file/20211221020047_c21e2009-61be-11ec-8add-525400138871/sliders.svg'}})
    registryComponentConfig({group: '基础组件', name: '选择框', component: {code: '选择框', previewImage: 'http://1.116.13.72/web/upload_file/20211221021751_24ca8822-61c1-11ec-8add-525400138871/a-Productstyle_list_selected.png'}})
    registryComponentConfig({group: '基础组件', name: '树形选择', component: {code: '树形选择', previewImage: 'http://1.116.13.72/web/upload_file/20211221020025_b5244ca8-61be-11ec-8add-525400138871/reporting-tree_select-32.svg'}})
    registryComponentConfig({group: '基础组件', name: '级联选择', component: {code: '级联选择', previewImage: 'http://1.116.13.72/web/upload_file/20211221015938_99495e01-61be-11ec-8add-525400138871/Collapse.svg'}})
    registryComponentConfig({group: '基础组件', name: '穿梭框', component: {code: '穿梭框', previewImage: 'http://1.116.13.72/web/upload_file/20211221021757_28541bdc-61c1-11ec-8add-525400138871/Exchange.png'}})
    registryComponentConfig({group: '基础组件', name: '复选框组', component: {code: '复选框组', previewImage: 'http://1.116.13.72/web/upload_file/20211221021754_26d0f620-61c1-11ec-8add-525400138871/checkbox.png'}})
    registryComponentConfig({group: '基础组件', name: '单选框组', component: {code: '单选框组', previewImage: 'http://1.116.13.72/web/upload_file/20211221021809_2f35e5c2-61c1-11ec-8add-525400138871/radio.png'}})
    registryComponentConfig({group: '基础组件', name: '日期选择', component: {code: '日期选择', previewImage: 'http://1.116.13.72/web/upload_file/20211221015946_9de17765-61be-11ec-8add-525400138871/date.svg'}})
    registryComponentConfig({group: '基础组件', name: '日期范围', component: {code: '日期范围', previewImage: 'http://1.116.13.72/web/upload_file/20211221021801_2ae87da4-61c1-11ec-8add-525400138871/filter_date.png'}})
    registryComponentConfig({group: '基础组件', name: '时间选择', component: {code: '时间选择', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_32947b59-61c1-11ec-8add-525400138871/Time_icon.png'}})
    registryComponentConfig({group: '基础组件', name: '时间范围', component: {code: '时间范围', previewImage: 'http://1.116.13.72/web/upload_file/20211221020108_cee45bee-61be-11ec-8add-525400138871/wd-applet-enter-time.svg'}})
    registryComponentConfig({group: '基础组件', name: '上传', component: {code: '上传', previewImage: 'http://1.116.13.72/web/upload_file/20211221020058_c91bb90a-61be-11ec-8add-525400138871/Upload.svg'}})
    registryComponentConfig({group: '基础组件', name: '拖拽上传', component: {code: '拖拽上传', previewImage: 'http://1.116.13.72/web/upload_file/20211221015951_a0d97867-61be-11ec-8add-525400138871/drag-drop.svg'}})
    registryComponentConfig({group: '基础组件', name: '开关', component: {code: '开关', previewImage: 'http://1.116.13.72/web/upload_file/20211221021814_3291a5e6-61c1-11ec-8add-525400138871/switch-01.png'}})
}

const createImageComponent = (defaultUrl: string): Omit<iVisualComponentConfig, 'group' | 'name'> => ({
    code: 'image',
    previewImage: defaultUrl,
    defaultData: {
        data: {
            /*图片地址*/
            url: defaultUrl,
            /*图片宽度*/
            width: '100%',
            /*图片高度*/
            height: null,
            /*图片覆盖方式*/
            objectFit: null,
            /*图片位置*/
            objectPosition: null,
            /*是否有覆盖内容*/
            hasCover: false,
        }
    },
    config: ({base, data}) => {
        base.registry({
            name: '图片设置',
            render: () => (
                <>
                    <PlFormItem label="图片地址">
                        <PlInput v-model={data.data.url}/>
                    </PlFormItem>
                    <PlFormItem label="图片宽度">
                        <PlInput v-model={data.data.width}/>
                    </PlFormItem>
                    <PlFormItem label="图片高度">
                        <PlInput v-model={data.data.height}/>
                    </PlFormItem>
                    <PlFormItem label="覆盖方式">
                        <PlSelect v-model={data.data.objectFit}>
                            {['fill', 'contain', 'cover', 'none', 'scale-down'].map(item => (
                                <PlSelectOption label={item} key={item} val={item}/>
                            ))}
                        </PlSelect>
                    </PlFormItem>
                    <PlFormItem label="图片位置">
                        <PlSelect v-model={data.data.objectPosition}>
                            {[
                                'top',
                                'bottom',
                                'left',
                                'right',
                                'center',
                                'top left',
                                'top right',
                                'bottom left',
                                'bottom right',
                            ].map(item => (
                                <PlSelectOption label={item} key={item} val={item}/>
                            ))}
                        </PlSelect>
                    </PlFormItem>
                    <PlFormItem label="覆盖内容">
                        <PlToggle v-model={data.data.hasCover}/>
                    </PlFormItem>
                </>
            )
        })
    },
})
